import { LinesDemo, LinesWireframe, LinesHitmap, LinesPoses } from "./jsx/allLiveEditors";

# Lines

`<Lines />` renders 3d lines.

## Props

| Name       | Type         | Default     | Description                     |
| ---------- | ------------ | ----------- | ------------------------------- |
| `children` | `Line[]`     | `[]`        | array of Line markers to render |
| `depth`    | `DepthState` | `undefined` | optional depth state settings   |
| `blend`    | `BlendState` | `undefined` | optional blend state settings   |

### Line

```js
type Line = {
  id?: number, // positive integer
  primitive:  "line strip" | "lines",
  closed: boolean,
  scaleInvariant: boolean,
  pose: {
    position: { x: number, y: number, z: number },
    orientation: { x: number, y: number, z: number, w: number }
  }
  // Lines can optionally include multiple poses.
  poses: [
    {
      position: { x: number, y: number, z: number },
      orientation: { x: number, y: number, z: number, w: number }
    }
  ],
  scale: {
    x: number,
    y: number,
    z: number,
  },
  color: {
    r: number, // between 0 and 1
    g: number, // between 0 and 1
    b: number, // between 0 and 1
    a: number, // between 0 and 1
  },
  points: [{ x: number, y: number, z: number } | [ number, number, number ]]
}
```

## Props Example

<LinesDemo />

## Wireframe Example

<LinesWireframe />

## Multi-Pose Example

<LinesPoses />

## Mouse Interaction

<LinesHitmap />
